<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="logo">
			<image lazy-load class="logoimg" src="../../static/index-select.png" mode=""></image>
		</view>
		<view class="footer">
			<view class="ent" @tap="btn">
				<u-button @tap="send" :disabled="disabled" class="btn" :ripple="true" ripple-bg-color="#909399">立即登录
				</u-button>
				<u-button @tap="send2" class="btn2" ripple-bg-color="#909399">立即体验</u-button>
			</view>
			<view class="agreement">
				<label class="radio">
					<radio :checked="flag" @click="radio" class="radios" value="" /><text></text>
				</label>
				<text><text style="color: #F67972;">同意</text> 《用户协议》《隐私协议》《儿童隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				disabled: true,
				user:""
			};
		},
		methods: {
			radio(e) {
				this.flag = !this.flag
			},
			btn() {
				uni.showToast({
					title: '请勾选同意协议',
					icon: "none"
				})
			},
			send() {
				uni.navigateTo({
					url: "../../subpag/phoneLogin/phoneLogin"
				})
			}, //立即登录
			send2(){
				uni.switchTab({
					url:"/pages/discover/discover"
				})
				
				console.log('----');
			}//立即体验
		},
		updated() {
			if (this.flag) {
				this.disabled = false
			} else {
				this.disabled = true

			}
		},
		created() {
			this.user = uni.getStorageSync("userData");
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				uni.switchTab({
					url: '../../pages/discover/discover'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #DC2C1F;
		height: 100vh;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	page {}

	// logo
	.logo {
		width: 100%;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logoimg {
		width: 150rpx;
		height: 150rpx;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.agreement {
		margin-top: 150rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #F8D6D4;
		margin-bottom: 50px;
	}

	.ent {
		width: 90%;
		margin: auto;

		.btn {
			border-radius: 20px;
			color: #DC2C1F;
		}

		.btn2 {
			background-color: transparent;
			margin-top: 30rpx;
			color: #FFFFFF;
			border-radius: 20px;
		}
	}
</style>
